body{
    padding:0;
    margin:0;
    background-color: black;
}

main{
    padding:0;
    margin:0;
    width:100vw;
    height:100vh;
    align-content: center;
}

h1{
    margin:0;
    padding:0;
    font-size:large;
}
h2{
    margin:0;
    padding:0;
}


    .assign-container{
        margin-right:auto;
        margin-left:auto;
        width:90%;
        height:100%;
        background-color:transparent;
        align-content:center;
        transition:2.5s;
    }

    .hero-image{
        margin-right:auto;
        margin-left:auto;
        background-image: url("images/tokyo-drawing.png");
        height:90%;
        width:90%;
        border-radius: 30px;
    }

    .assign-container:hover{
        background-color:transparent;
    }

    

    .main-content-container{
        
        width:100%;
        height:90%;
        background-color:#000000;
        border-style:solid;
        border-color: black;
        align-content: center;
        border-radius:10px;
        transition:2.5s;
    }

    .main-content-container:hover{
        background-color: transparent;
    }
    .main-content-container:hover .page-header{
        background-color: #0000009c;
    }
    .main-content-container:hover .page-header h1{
        color:#ffffff;
        letter-spacing: 3px;
        text-shadow:
      2px 0 10px #ff8800f1,
      0px 0 25px #ffae00b9,
      0 -1px 0 #ffecc3,
      0 0 5px #ffecc3,
      0 5px 10px #ffae00;
        text-transform: uppercase;
    }

    

    .row1-container{
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items: center;
        gap:30px;
        width:100%;
        height:10%;
    }

    .row2-container,
    .row3-container{
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items: center;
        gap:30px;
        width:100%;
        height:40%;
    }

    .fig1{
        margin:0;
        padding:0;
        width:20em;
        height:18em;
        background-color:white;
        border-style:inset;
        border-color: white;
    }

    .row3-container{
        width:100%;
        height:50%;
    }
    
    .page-header{
        width:30em;
        height:auto;
        background-color:rgb(0, 0, 0);
        text-align: center;
        border-style: solid;
        border-right: double;
        border-radius: 10px;
        border-width: 3px;
    }

    .page-header h1{
        margin:0;
        padding:0;
        font-size:2rem;
        font-family:monospace;
        font-weight: 300;
        letter-spacing: -2px;
        transition:2.5s;
        color:rgb(255, 255, 255);
    }

    .nav-box{
        width:50em;
        height:auto;
        background-color:#e04428;
        display:flex;
        flex-direction: row;
        justify-content:space-evenly;
        border-style:solid;
        transition:1.5s;
    }

    #l1:hover h2,
    #l2:hover h2,
    #l3:hover h2{
        letter-spacing: 1px;    
    }

    .nav-box:hover{
        border-radius: 15px;
    }

    .links{
        height:3em;
        background-color:#e04428;
        border-radius:10px;
        border-color: black;
        border-width:2px;
        align-content:center;
    }

    .links:hover{
        background-color:#ff91006e;
    }

    .links:active{
        background-color: #ff9100;
    }

    .links h2{
        font-family:monospace;
        text-align: center;
        font-size:1.5rem;
        font-weight: normal;
        margin:0;
        padding:0;
        letter-spacing: -1px;
        transition:0.3s;
    }

    .links a{
        text-decoration: none;
        color:white;
    }

    img{
        width:100%;
        height:100%;
    }

    figcaption{
        background-color:black;
        color:white;
        font-size:1.2rem;
        font-family:monospace;
    }


@media(max-width:1800px){

    .fig1{
        height:13em;
        width:16em;
    }

    figcaption{
        font-size:1rem;
    }

    .nav-box{
        width:40em;
    }
    
}