* {
    box-sizing: border-box;
}
body {
    margin:20px;
    background-color:black;
    color:white;
    font-family: Arial;
}
header {
    background-color:#1a1a1a;
    border:2px solid red;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    max-width:1400px;
}
header h1 {
    margin:0;
    text-shadow:1px 1px red;
}
header h3 {
    margin-bottom:5px;
    font-style: italic;
}
nav {
    background-color:#1a1a1a;
    border:2px solid red;
    display:flex;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    padding:10px 0px 10px 10px;
    max-width:1400px;
    text-align:center;
    justify-content: space-around;
}
nav a {
    background-color: black;
    border:2px solid red;
    width:100%;
    margin-right:10px;
    color:red;
    text-decoration: none;
    padding:5px;
}
nav a:hover {
    background-color:red;
    border:2px solid white;
    color:white;
}
.current-link {
    background-color:red;
    border:2px solid white;
    color:white;
}

article {
    border:2px solid red;
    padding:20px;
    margin-left:auto;
    margin-right:auto;
    max-width:1400px;
}
.desc1 {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #660000 , #ff3333);
    overflow:auto;
    margin-bottom:20px;
    padding:10px;
}
.desc1 img {
    width:50%;
    float:right;
    border:2px solid red;
    margin-left:10px;
}
.desc2 {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to left, #660000 , #ff3333);
    overflow:auto;
    text-align:right;
    margin-bottom:20px;
    padding:10px;
}
.desc2 img {
    width:50%;
    float:left;
    border:2px solid red;
    margin-right:10px;
}

.desc1f {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #660000 , #ff3333);
    overflow:auto;
    margin-bottom:20px;
    padding:10px;
}
.desc1f img {
    width:100%;
    border:2px solid red;
}
.desc2f {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to left, #660000 , #ff3333);
    overflow:auto;    
    margin-bottom:20px;
    padding:10px;
}
.desc2f img {
    width:100%;
    border:2px solid red;
}

.desc1v {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #660000 , #ff3333);
    text-align: center;
    margin-bottom:20px;
    padding:10px;
}
.desc2v {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to left, #660000 , #ff3333);
    text-align: center;
    margin-bottom:0px;
    padding:10px;
}

.desc1c {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #660000 , #ff3333);
    text-align: center;
    margin-bottom:20px;
    padding:20px;
}
.desc2c {
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to left, #660000 , #ff3333);
    text-align: center;
    margin-bottom:20px;
    padding:20px;
}
.desc1c a,
.desc2c a {
    background-color: black;
    border:2px solid red;
    width:100%;
    margin:20px;
    color:red;
    text-decoration: none;
    padding:10px 50px;
}
.desc1c a:hover,
.desc2c a:hover {
    background-color:red;
    border:2px solid white;
    color:white;
}

footer {
    background-color:#1a1a1a;
    border:2px solid red;
    text-align:center;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    max-width:1400px;
}
footer a {
    color:red;
}

@media (min-width:371px) and (max-width:600px) {
    body {
        margin:10px;
    }
    header h3 {
        margin-top:5px;
    }
    nav {
        flex-direction: column;
        margin-top:10px;
        margin-bottom:10px;
        padding:10px 10px 0px 10px;
        align-items: center;                   
    }
    nav a {
        margin-right:0;
        margin-bottom:10px;
        width:100%;
    }
    article {
        padding:10px;
    }
    .desc1 {
        height:auto;
        text-align:center;
        margin-bottom:10px;      
    }
    .desc1 img {
        width:100%;
        float:none;
        margin-left:0px;
    }
    .desc2 {
        height:auto;
        text-align:center;
        margin-bottom:10px;
    }
    .desc2 img {
        width:100%;
        float:none;
        margin-right:0px;
    }
    .desc1c,
    .desc2c {
        margin-bottom:10px;
    }
    footer {
        margin-top:10px;
    }

    iframe {
        width:308px;
        height:174px;
    }
}

@media (max-width:370px) {
    body {
        margin:10px;
    }
    header h3 {
        margin-top:5px;
    }
    nav {
        flex-direction: column;
        margin-top:10px;
        margin-bottom:10px;
        padding:10px 10px 0px 10px;
        align-items: center;                   
    }
    nav a {
        margin-right:0;
        margin-bottom:10px;
        width:100%;
    }
    article {
        padding:10px;
    }
    .desc1 {
        height:auto;
        text-align:center;
        margin-bottom:10px;      
    }
    .desc1 img {
        width:100%;
        float:none;
        margin-left:0px;
    }
    .desc2 {
        height:auto;
        text-align:center;
        margin-bottom:10px;
    }
    .desc2 img {
        width:100%;
        float:none;
        margin-right:0px;
    }
    .desc1c,
    .desc2c {
        margin-bottom:10px;
    }
    footer {
        margin-top:10px;
    }
    
    iframe {
        width:252px;
        height:142px;
    }
}