body{
    color: rgb(0, 0, 0);
    background: 
    rgb(3, 0, 19)
    radial-gradient(closest-side,rgb(36, 17, 121)10%,rgb(54, 11, 71, 0.7) 30%,rgb(3, 0, 19)100%);
    background-repeat: no-repeat;
}
#content{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 80%;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    display: grid;
}

@font-face {
    font-family: 'ShareTech';
    src: url(Fonts/Share_Tech/ShareTech-Regular.ttf);
}
@media (max-width: 599px){
    #content{
        grid-template-columns: repeat(12, 1fr);
    }
    header{
        grid-column: 1 / span 12;
        grid-row: 1 / span 1;
        color: rgb(255, 255, 255);
        font-size: 100%;
        font-family: 'ShareTech';
        background-image: linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0) 50%, rgb(12, 8, 82));
        margin: 10px;
        padding: 20px;
        border-radius: 5px;
    }
    header a{
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 100%;
        margin: 10px;
        cursor: pointer;
    }
    figure{
        grid-column: 1 / span 12;
        grid-row: 2 / span 1;
        background-image: linear-gradient(-100deg,rgb(75, 16, 55),rgb(0, 0, 0) 50%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        text-align: center;
    }
    figure img{
        width: 90%;
        padding: 10px;

    }
    nav{
        grid-column: 1 / span 12;
        grid-row: 3 / span 1;
        background-image:linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0), rgb(12, 8, 82),rgb(0, 0, 0), rgb(75, 16, 55));
        margin: 10px;
        border-radius: 5px;
    }
    nav ul{
        display: flex;
        list-style-type: none;
        overflow: hidden;
        padding: 0px;
        margin: 0px;
        justify-content: center;
    }
    nav ul li a{
        float: left;
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 15px 20px;  
        color: aliceblue; 
        font-family: 'ShareTech';
        font-weight: 600;
        font-size: 25%;
    }
    nav ul li a:hover{
        background-color: rgb(107, 107, 107);
        transition: 0.3s;
        cursor: pointer;
    }
    section{
        grid-column: 1 / span 12;
        grid-row: 5 / span 1;
        background-image:linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0) 40% 60%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        color: aliceblue;
        font-family: 'ShareTech';
        padding: 30px;
    }
    section h1{
        border-bottom: 2px solid aliceblue;
        width: 65%;
        padding: 10px;
        padding-bottom: 0px;
    }
    aside{
        grid-column: 1 / span 12;
        grid-row: 4 / span 1;
        background-image:linear-gradient(-90deg,rgb(75, 16, 55),rgb(0, 0, 0) 40% 60%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        font-family: 'ShareTech';
        padding-top: 20px;
        color: aliceblue;
        text-align: center;
        font-size: 90%;
    }
    aside img{
        border: 2px outset rgb(110, 85, 143);
        
    }
    aside table, th, td {
        border: 2px outset rgb(110, 85, 143);
        text-align: left;
        padding: 10px;
        border-collapse: collapse;
        background-color: rgb(36, 10, 44, 0.4);
        margin: 5px;
    }
    aside th{
        background-color: rgb(0, 0, 0, 0.6);
        text-align: center;
        font-size: 100%;
    }
    #center{
        text-align: center;
        border: 2px outset rgb(110, 85, 143);
    }
    #buttom{
        font-family: 'ShareTech';
        font-weight: 600;
        font-size: 15px;
        background-color: rgb(110, 85, 143, 0.4);
        color: aliceblue;
        border: 2px outset rgb(110, 85, 143);
        padding: 5px;
    }
    footer{
        grid-column: 1 / span 12;
        grid-row: 7 / span 1;
        margin: 10px;
        border-radius: 5px;
        color: rgb(52, 64, 165);
        font-family: 'ShareTech';
        font-weight: 700;
        text-align: center;
        padding: 30px;
        background-image: linear-gradient(360deg,rgb(75, 16, 55),rgb(0, 0, 0));
    }
}


@media (min-width: 600px) and (max-width: 900px){
    #content{
        grid-template-columns: repeat(12, 1fr);
    }
    header{
        grid-column: 1 / span 12;
        grid-row: 1 / span 1;
        color: rgb(255, 255, 255);
        font-size: 15px;
        font-family: 'ShareTech';
        background-image: linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0) 50%, rgb(12, 8, 82));
        margin: 10px;
        padding: 20px;
        border-radius: 5px;
    }
    header a{
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 100px;
        margin: 10px;
        cursor: pointer;
    }
    figure{
        grid-column: 1 / span 12;
        grid-row: 2 / span 1;
        background-image: linear-gradient(-100deg,rgb(75, 16, 55),rgb(0, 0, 0) 50%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        text-align: center;
    }
    figure img{
        width: 90%;
        padding: 10px;

    }
    nav{
        grid-column: 1 / span 12;
        grid-row: 3 / span 1;
        background-image:linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0), rgb(12, 8, 82),rgb(0, 0, 0), rgb(75, 16, 55));
        margin: 10px;
        border-radius: 5px;
    }
    nav ul{
        display: flex;
        list-style-type: none;
        overflow: hidden;
        padding: 0px;
        margin: 0px;
        justify-content: center;
    }
    nav ul li a{
        float: left;
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 15px 20px;  
        color: aliceblue; 
        font-family: 'ShareTech';
        font-weight: 600;
        font-size: 25px;
    }
    nav ul li a:hover{
        background-color: rgb(107, 107, 107);
        transition: 0.3s;
        cursor: pointer;
    }
    section{
        grid-column: 1 / span 12;
        grid-row: 5 / span 1;
        background-image:linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0) 40% 60%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        color: aliceblue;
        font-family: 'ShareTech';
        padding: 30px;
    }
    section h1{
        border-bottom: 2px solid aliceblue;
        width: 165px;
        padding: 10px;
        padding-bottom: 0px;
    }
    aside{
        grid-column: 1 / span 12;
        grid-row: 4 / span 1;
        background-image:linear-gradient(-90deg,rgb(75, 16, 55),rgb(0, 0, 0) 40% 60%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        font-family: 'ShareTech';
        padding-top: 20px;
        color: aliceblue;
        text-align: center;
        
    }
    aside img{
        border: 2px outset rgb(110, 85, 143);
        
    }
    aside table, th, td {
        border: 2px outset rgb(110, 85, 143);
        text-align: left;
        padding: 10px;
        border-collapse: collapse;
        background-color: rgb(36, 10, 44, 0.4);
        margin: 5px;
    }
    aside th{
        background-color: rgb(0, 0, 0, 0.6);
        text-align: center;
        font-size: 30px;
    }
    #center{
        text-align: center;
        border: 2px outset rgb(110, 85, 143);
    }
    #buttom{
        font-family: 'ShareTech';
        font-weight: 600;
        font-size: 15px;
        background-color: rgb(110, 85, 143, 0.4);
        color: aliceblue;
        border: 2px outset rgb(110, 85, 143);
        padding: 5px;
    }
    footer{
        grid-column: 1 / span 12;
        grid-row: 7 / span 1;
        margin: 10px;
        border-radius: 5px;
        color: rgb(52, 64, 165);
        font-family: 'ShareTech';
        font-weight: 700;
        text-align: center;
        padding: 30px;
        background-image: linear-gradient(360deg,rgb(75, 16, 55),rgb(0, 0, 0));
    }
}





@media (min-width: 900px){
    #content{
        grid-template-columns: repeat(12, 1fr);
    }
    header{
        grid-column: 1 / span 6;
        grid-row: 1 / span 1;
        color: rgb(255, 255, 255);
        font-size: 15px;
        font-family: 'ShareTech';
        background-image: linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0) 50%, rgb(12, 8, 82));
        margin: 10px;
        padding: 20px;
        border-radius: 5px;
    }
    header a{
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-size: 100px;
        margin: 10px;
        cursor: pointer;
    }
    figure{
        grid-column: 7 / span 12;
        grid-row: 1 / span 1;
        background-image: linear-gradient(-100deg,rgb(75, 16, 55),rgb(0, 0, 0) 50%, rgb(12, 8, 82));
        margin: 10px;
        padding: 20px;
        border-radius: 5px;
        display: flex;
    }
    figure img{
        width: 100%;
        justify-content: center;
        padding: 0px;
    }
    nav{
        grid-column: 1 / span 12;
        grid-row: 2 / span 1;
        background-image:linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0), rgb(12, 8, 82),rgb(0, 0, 0), rgb(75, 16, 55));
        margin: 10px;
        border-radius: 5px;
    }
    nav ul{
        display: flex;
        list-style-type: none;
        overflow: hidden;
        padding: 0px;
        margin: 0px;
        justify-content: center;
    }
    nav ul li a{
        float: left;
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 15px 20px;  
        color: aliceblue; 
        font-family: 'ShareTech';
        font-weight: 600;
        font-size: 25px;
    }
    nav ul li a:hover{
        background-color: rgb(107, 107, 107);
        transition: 0.3s;
        cursor: pointer;
    }
    section{
        grid-column: 1 / span 7;
        grid-row: 3 / span 1;
        background-image:linear-gradient(100deg,rgb(75, 16, 55),rgb(0, 0, 0) 40% 60%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        color: aliceblue;
        font-family: 'ShareTech';
        padding: 30px;
        
    }
    section h1{
        border-bottom: 2px solid aliceblue;
        width: 165px;
        padding: 10px;
        padding-bottom: 0px;
    }
    aside{
        grid-column: 8 / span 12;
        grid-row: 3 / span 1;
        background-image:linear-gradient(-90deg,rgb(75, 16, 55),rgb(0, 0, 0) 40% 60%, rgb(12, 8, 82));
        margin: 10px;
        border-radius: 5px;
        font-family: 'ShareTech';
        padding-top: 20px;
        color: aliceblue;
        text-align: center;
        font-size: 90%;
    }
    aside img{
        border: 2px outset rgb(110, 85, 143);
        
    }
    aside table, th, td {
        border: 2px outset rgb(110, 85, 143);
        text-align: left;
        padding: 10px;
        border-collapse: collapse;
        background-color: rgb(36, 10, 44, 0.4);
        margin: 5px;
    }
    aside th{
        background-color: rgb(0, 0, 0, 0.6);
        text-align: center;
        font-size: 30px;
    }
    #center{
        text-align: center;
        border: 2px outset rgb(110, 85, 143);
    }
    #buttom{
        font-family: 'ShareTech';
        font-weight: 600;
        font-size: 15px;
        background-color: rgb(110, 85, 143, 0.4);
        color: aliceblue;
        border: 2px outset rgb(110, 85, 143);
        padding: 5px;
    }
    footer{
        grid-column: 1 / span 12;
        grid-row: 4 / span 1;
        margin: 10px;
        border-radius: 5px;
        color: rgb(52, 64, 165);
        font-family: 'ShareTech';
        font-weight: 700;
        text-align: center;
        padding: 30px;
        background-image: linear-gradient(360deg,rgb(75, 16, 55),rgb(0, 0, 0));
    }
}