﻿body {
    background-image: url(cruise-sky.bmp);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    color: #000066;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    overflow: hidden auto;
    margin:0;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
   
}

img
{border:none; padding:5px;}

#container {
    background-color: rgb(231 243 246 / 0.85);
    border-radius: 0 0 15px 15px;
    margin: 0px;
    padding: 0;
}

   

.clearfix {
    overflow: auto; vertical-align:middle;
}

#search {
    background-color: beige;
    padding: 5px;
    border-radius: 15px;
    text-align: center; font-size:larger;
}

h1 {font-size:24px;color:#000066;text-align:center;}

ul {
    display:inline-table;
    
    
    text-align:left;
}
li {
    float:left; padding-right:10px;
}

table {
	
    padding: 3px;
    overflow: hidden; 
	
	}

caption
 {font:bold 1em arial,san-serif;}

#logo
{	
    line-height: 1;
    font-size:small;
    font-weight: bold;
    text-align: center;
	float:left; padding:20px;
}
#freshmen {
    list-style-type: none;
    display: inline-block;
    background-color: blue;
    text-align: center;
   
}
    #freshmen ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }

#freshmen li
	{ float:left;padding:10px 15px 10px 3px; }

#freshmen li a
	{	
		text-decoration: none; font-size:larger;
        text-transform: uppercase;        
        color: gold; font-weight:bold;
        
    }

#freshmen li a:hover:not(.active) {background-color:green;}

#home {
    list-style-type: none;
    background-color: none;
    
    margin: 0 0 0 0%;
}

#home li {
    margin: 0 0 0 10px;
    font-family: century gothic,Arial,san-serif;
    font-variant: small-caps;
    font-size: 24px;
    font-weight: 700;
    color: #000066;
    text-align: left;
    background-color: none;
}

#fun {
   
    list-style-type: none;

    margin: 0 0 0 0;
}

    #fun li {
        float: left;
        padding: 3px;
        text-align: center;
    }

        #fun li a {
            text-decoration: none;
            font-size: large;
            text-transform: uppercase;
            background-color: brown;
            color: gold;
            font-weight: bold;
            padding: 5px;
            text-align: center;
            border-radius: 10px 10px 10px 10px;
        }

#fly ul {
    display: inline;
    list-style-type: none;
    grid-template-columns: auto auto auto auto;
}
@media screen and (max-width: 700px) {
    body {
        background-image: none;
        background-color: rgb(231 243 246 / 0.85);
    }

    #container {
        background-color: rgb(231 243 246 / 0.85);
        margin: 0;
        padding: 0;
    }

   
    #freshmen {
        width: 100%;
        margin: 0;
        text-align:center;
    }
        #freshmen li a {
            padding-right: 5px;
            margin: 0;
            font-size: large;
        }
    #home {
        margin: 0 0 0 3%;
        padding: 0;
    }

    #header {
       padding:10px;height:8em;
    }

    ul {
        padding: 10px;
    }
    #fun li a {font-size:small;}
    #fly ul {
        display:inline;
        list-style-type: none;
       
    }
   
}
    @media screen and (min-width:701px) {
        #container {
            margin: 0 5% 0 5%;
        }

        #freshmen {
            margin: 0 5% 0 5%;
            text-align:center;
            width: 90%;
        }
        #freshmen ul {margin:0;width:100%;}
            #freshmen li a {
                font-size:larger;
            }

        li {float:none;}
      
        #fun {width:100%;}

    }

    @media screen and (min-width:1050px) {
        #container {
            margin: 0 13% 0 13%;
        }

        #freshmen {
            margin: 0 13% 0 13%;
            width: 74%;
            text-align:center;
        }

            #freshmen ul{
                margin:0;width:90%;
            }
        #freshmen li{
                     margin:0;
        }
            #freshmen li a {
                font-size: larger;
                padding-right:20px;
            }  

        #fun {
            width:90%;margin:0 0 0 10%;
        }
        #fly {display:grid;
            grid-template-columns: auto auto auto;
        }
    }



    #content {
        text-wrap: normal;
        border-radius: 40px;
        text-align: justify;
        padding: 0 15px;
    }

#foot01 {
    text-align: center;
    background-color: rgb(231 243 246 / 0.85);
    border-radius: 20px;
    margin: auto;
    width: 70%;
    align-items: center;
}
@media screen and (max-width: 700px) {
    #foot01 {
        text-align: center;
        background-color: rgb(231 243 246 / 0.85);
    }

}
    #left {
        text-align: center;
        margin: auto;
        border-radius: 20px;
    }

    #years {
        margin: auto;
        width: 100%;
        text-align: center;
        background-color: #ffffff;
        opacity: .9;
        border-radius: 40px;
    }



    #anniversary {
        margin: auto;
        width: 80%;
        background-color: #ffffff;
        opacity: .9;
        border-radius: 40px;
    }

   

