header, ol, ul {
	list-style: none;
}


/* mobile css */


/* tablet css */



.image1 {
    grid-area: img1;
    display: flex;
    justify-content: center;
    margin: auto;
}
.image2 {
    grid-area: img2;
    display: flex;
    justify-content: center;
    margin: auto;
}
@media screen and (min-width:600px) {
   body { 
    background-color: rgb(165, 42, 42);
    width: 100%;
    display: flex;
    justify-content: center;
   }
   .contents {
    display: flex;
    list-style-type: none;
    width: 600px;
    align-items: center;
    color:rgb(255, 255, 255);  
}
.contents li {

text-align: center;
background-color: rgb(138, 50, 57);
height: 4em;
display:flex;
align-items: center;
width: 100px;


}
.contents a:link, a:visited {
color:rgb(255, 255, 255);
text-decoration: none;

}
.s {
    margin-left: 50px;
}
   main {
    margin: 0;
    padding-top: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 800px;
    margin: auto;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-areas:
    'title title'
    'img1 img1'
    'p1 p2'
    'img2 img2'
    'p3 p4';
    grid-template-columns: 400px 400px;
    grid-template-rows:100px 1fr 1fr;
   }
    .image1 {
        grid-area: img1;
        display: flex;
        justify-content: center;
        margin: auto;
        width:75%
    }
    

    header {
        background-color: rgb(138, 50, 57);
        margin-top: -10px;
        width: 800px;
        margin:auto;
        height: 4em;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        position: fixed;
        color: azure;
    }
}
   .icon {
    visibility: hidden;
   }
   nav ul {
    display:block;
    }


/* computer css */
@media screen and (min-width:1200px){
    body{
        background-color: rgb(165, 42, 42);
        
    }

    nav ul {
        display:block;
    }
    .icon {
        visibility: hidden;
       }
       .contents {
            display: flex;
            list-style-type: none;
            width: 600px;
            align-items: center;
            color:rgb(255, 255, 255);  
    }
    .contents li {
    
        text-align: center;
        background-color: rgb(138, 50, 57);
        height: 4em;
        display:flex;
        align-items: center;
        width:150px;
        
        
    }
    .contents a:link, a:visited {
        color:rgb(255, 255, 255);
        text-decoration: none;
    
    }
    main {
        margin: 0;
        padding-top: 4em;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        width: 1200px;
        margin: auto;
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-areas:
        'title title'
        'img1 img1'
        'p1 p2'
        'p3 p4'
        'img2 img2';
        grid-template-columns: 600px 600px;
        grid-template-rows:100px 1fr 1fr 1fr 1fr;
        
        
    }
    .image1 {
        grid-area: img1;
        display: flex;
        justify-content: center;
        margin: auto;
        width:100%;
    }
    header {
        background-color: rgb(138, 50, 57);
        width: 1200px;
        margin:auto;
        margin-top: -10px;
        height: 4em;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        position: fixed;
        color: azure;
    }
}
@media screen and (max-width:600px){
    body {
        background-color: rgb(165, 42, 42);
        display: flex;
        justify-content: center;
    }
    .contents {
        display: none;
    }
    .image1 {
        grid-area: img1;
        display: flex;
        justify-content: center;
        margin: auto;
        width:50%;
    }
    .icon {
        margin: 5px;
        margin-left: 120px;
        color:white;
        cursor: pointer;
        font-size: 30px;
        padding-left: 5px;
        width: 1200px;
        visibility: visible;
    }
        main {
            margin: 0;
            padding-top: 4em;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            width: 500px;
            margin: auto;
            display: grid;
            justify-content: center;
            align-items: center;
            grid-template-areas:
            'title title'
            'p1 p1'
            'img1 img1'
            'p2 p2'
            'p3 p3'
            'img2 img2'
            'p4 p4';
            grid-template-columns: 250px 250px;
            grid-template-rows:100px 1fr 1fr 1fr 1fr;
        }
        header {
            background-color: rgb(138, 50, 57);
            width: 500px;
            margin-top: -10px;
            margin:auto;
            height: 4em;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            position: fixed;
            color: azure;
        }
        .s {
            margin-left: 30px;
        }
        p {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.p1 {
    grid-area: p1;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 50px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}

.p2 {
    grid-area: p2;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 16px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}
.p3 {
    grid-area: p3;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 16px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}
.p4 {
    grid-area: p4;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 50px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}
.title {
    grid-area: title;
    font-size: 30px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 50px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;

    
}

}
nav ul {
    display: none;
}

p {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.p1 {
    grid-area: p1;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 50px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}

.p2 {
    grid-area: p2;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 16px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}
.p3 {
    grid-area: p3;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 16px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}
.p4 {
    grid-area: p4;
    font-size: 16px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 50px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}
.title {
    grid-area: title;
    font-size: 30px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight:bold;
    text-align: center;
    margin-top: 50px;
    color:rgb(165, 42, 42);
    margin-bottom: 50px;
}