body{
    padding:0;
    margin:0;
}

main{
    padding:0;
    margin:0;
    width:100vw;
    height:100vh;
    align-content: center;
}
@media(max-width:2000px){
    .courses-container{
        margin-left:auto;
        margin-right:auto;
        width:80%;
        height:80%;
        display:flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        background-color:rgb(213, 213, 213);
        gap:20px;
    }



    .web-graphics1-container,
    .web-vector-graphics-container,
    .web-graphics-for-print-container{
        width:25em;
        height:25em;
        background-color:rgb(170, 170, 170);
    }

    .web-graphics1-container{
        border:ridge 5px;
        border-color:rgb(176, 176, 176);
        border-radius: 5px;
        transition:0.15s;
    }

    .web-graphics1-container:hover{
        border-width: 7px;
    }
    /* Web Graphics 1 Box*/

    .windows-xp-container{
        cursor: pointer;
        background-color: antiquewhite;
        background-size: cover;
        background-repeat: no-repeat;
        width:100%;
        height:95%;
        display:flex;
        flex-direction: row;
        align-items: center;
    }

    .windows-xp-container:hover{
        background-image:url("images/windows-xp-background.png");
    }


    .windows-icon{
        margin-right:auto;
        margin-left:auto;
        align-content: center;
        width:auto;
        height:auto;
        display:flex;
        flex-direction:column;
        align-content: center;

    }

    .comput-icon{
        padding:0;
        margin:0;
        text-align: center;
    }

    #web-graph-1-link{
        text-decoration: none;
        color: black;
        font-size:1.5rem;
        transition:0.15s;
    }

    #web-graph-1-link:hover{
        color:rgb(218, 218, 218);
        background-color:#3070b9;
        cursor: pointer;
    }

    #web-graph-1-link:active{
        cursor: progress;
    }
    

    /* Windows XP Toolbar*/

    .windows-toolbar-container{
        display:none;
        width:100%;
        height:1em;
        background-color:#2f6099;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .windows-start-menu{
        background-color: #659933;
        height:1em;
        width:15%;
        border-radius:3px;
        text-align:center;
        box-shadow:inset 0px 0px 3px 0px rgba(18, 39, 13, 0.321);

    }

    .windows-start-menu:active{
        background-color:#56852b;
    }

    .windows-start-menu p{
        margin-top:1px;
        padding:0;
        font-size:15px;
        color:rgb(219, 219, 219);
        font-weight: lighter;

    }

    .windows-time{
        background-color: #4980be;
        height:1em;
        width:20%;
        text-align:center;
    }

    .windows-time p{
        margin-top:1px;
        padding:0;
        font-size:15px;
        color:rgb(219, 219, 219);
        font-weight: lighter;
    }

    /*WEB VECTOR GRAPHICS CONATINER*/

    .web-myspace-container{
        width:100%;
        height:100%;
        background-color:rgb(251, 189, 210);
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition:0.15s;
    }

    .web-myspace-container:hover{
        background-color:rgb(255, 161, 192) ;
    }


    .web-vector-graphics-container{
        border: double 10px;
        border-color:black;
    }


    .web-vector-title{
        align-content:center;
        text-align:center;
        font-size:1rem;
        width:10em;
        height:3em;
        border-radius:10px;
        border:solid 3px;
        background-color:white;
        transition:0.5s;
    }

    .web-vector-title:hover{
        color:rgb(199, 31, 101);
        font-size:1.2rem;
        background-color:rgb(255, 235, 235);
    }

    #web-vect-link{
        text-decoration:none;
        color:black;
    }


    /*WEB GRAPHICS FOR PRINT*/

    .web-graphics-for-print-container{
        border-style:ridge;
        border-width: 10px;
    }

    .web-graphics-for-print-container:hover .orange-main{
        background-color:#ffba44;
    }

    .web-graphics-for-print-container:hover .orange-header{
        background-color:#ff6640;
    }

    .web-graphics-for-print-container:hover #open-button{
        background-color:#ff3d11;;
    }

    .orange-ui-container{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-content:center;
    }

    .orange-header{
        width:100%;
        height:10%;
        background-color:#ff9074;
        display:flex;
        flex-direction: row;
        justify-content:flex-end;
        align-items:center;
    }


    .orange-main{
        background-color:#ffd58d;
        width:100%;
        height:90%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items:center;
    }


    .orange-main-window{
        width:90%;
        height:70%;
        background-color:#383736;
        border-radius:20px;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        gap:10px;
        border-style:inset;
    }

    .orange-main-window:hover{
        background-image: url("images/tokyo-drawing.png");
        background-position: cover;
        background-repeat: no-repeat;
        
    }

    .circle{
        width:7em;
        height:7em;
        border-radius:100%;
        background-color:blue;
        display:flex;
        justify-content: center;
        align-items: center;
    }



    .triangle{
        margin-left:1em;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 30px 0 30px 50px;
        border-color: transparent transparent transparent #FF4532;
        transform: rotate(0deg);
    }

    #play-now{
        width:7em;
        height:auto;
        border-bottom-style: inset;
        border-width: 2px;
    }

    #open-button{
        width:auto;
        height:auto;
        background-color:#ff8063;
        border-radius:10px;
        font-size:1rem;
    }

    #open-button a{
        text-decoration:none;
        color:black;
    }

}

@media(max-width:1600px){
    

    .courses-container{
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        gap:20px;
    }

    .web-graphics1-container,
    .web-vector-graphics-container,
    .web-graphics-for-print-container{
        width:20em;
        height:20em;
    }
}

@media(max-width:1300px){

    .windows-xp-container{
        height:90%;
    }

    .windows-toolbar-container{
        height:0.5em;
    }

    .windows-time,
    .windows-start-menu{
        display:none;
    }

    .courses-container{
        flex-direction: column;
        justify-content:space-evenly;
        align-items: center;
    }

    .web-graphics1-container,
    .web-vector-graphics-container,
    .web-graphics-for-print-container{
        margin:0;
        padding:0;
        width:15em;
        height:10em;
        transition:0.15s;

    } 

    .web-graphics1-container:hover,
    .web-vector-graphics-container:hover,
    .web-graphics-for-print-container:hover{
        width:16em;
        height:11em;
    }

    .web-graphics1-container:hover .windows-time{
        display:block;
    }
    .web-graphics1-container:hover .windows-start-menu{
        display:block;
    }

    .web-graphics1-container:hover .windows-toolbar-container{
        height:1em;
    }

    .windows-time{
        width:25%;
    }

    .comput-icon{
        height:50px;
    }
}

@media(max-width:850px){

    .courses-container{
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        gap:20px;
    }

    .web-graphics1-container,
    .web-vector-graphics-container,
    .web-graphics-for-print-container{
        margin:0;
        padding:0;
        width:20em;
        height:auto;
    }    

}