@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

@import url('small.css') screen and (max-width: 767px);

@import url('big.css') screen and (min-width:767px);

*{

    margin:0px;
    padding:0px;
    font-size: 0px;

}

html{

    font-family: "Comfortaa", sans-serif;

}

body{

    width:100%;
    height:100%;

    background-color: rgba(0, 0, 0, 1);

}
header {

    width:100%;

    padding-top: 20px;

    background-image: url(../images/background\ lightning.jpeg);
    background-repeat: no-repeat;

    background-size: 100% 120px;

}
header img{

    height:70px;

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;

}
header nav ul{

    width: 100%;
    display: flex;
    justify-content: space-around;

    background-color: rgb(56, 55, 55);

    padding-top: 10px;
    padding-bottom: 10px;

}
header nav ul li{


    display: inline;

}
header nav ul li a{

    font-size: 16px;
    text-decoration: none;

    background-color: rgba(56, 55, 55);
    color: white;

    padding:10px;

}

main article figure{

    background-color: blueviolet;
    text-align: center;
    
}

.images{

    height: 30vh;

    display: block;
    margin-left: auto;
    margin-right: auto;

}

figcaption{

    font-size: 18px;
    color: white;

}

main article section{

color: white;

}

main article section h2{

    margin: 10px 0px;
    
    font-size: 24px;
    
}
main article section h5{
    
    font-size: 12px;
    
}

main article section p{

    font-size: 16px;

    margin:20px 0px;

}

h1{

    text-align: center;

    font-size: 22px;

    text-transform: uppercase;

}

aside section{

    background-color: lightgray;
    height: 55%;

    margin-bottom: 10px;

}

aside section nav{

    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;

}

aside nav ul li a{

    font-size: 16px;
    text-decoration: none;

    display: block;
    margin: 20px;

    text-align: center;

}

#Video {

    text-align: center;
    
}
#Video figure figcaption {

    font-size: 14px;
    
    color: black;

}
#Video figure figcaption a{

    font-size: 14px;
    
    color: blue;
    text-decoration: none;

}
#Bottom{

    margin-top: 100px;

    color: white;

}

#Bottom h1{

    margin-bottom: 20px;

}

.examples{

    display: flex;
    justify-content: center;

}
.examples figure img{

    height:20vh;

}
.examples figure iframe{

    height:20vh;
    width:100%;  

}

.examples figure figcaption{

    
    text-align: center;

}
.games p{

font-size: 16px;
margin: 0px 30px;

}

footer nav ul{

    width: 100%;
    display: flex;
    justify-content: space-around;

    background-color:rgb(56, 55, 55);

    padding: 10px;

}
footer nav ul li{

    display: inline;

}
footer a{

    font-size: 16px;
    text-decoration: none;

    color: white;
    background-color: rgb(56, 55, 55);

}