:root{
    --asu-red: #8C1D40;
    --asu-yellow: #ffc627;
    --white: #fafafa;
    --gray: #d0d0d0;
    --black: #212121;
}

body{
    background: var(--white);
    font-family: Georgia, serif;
    line-height: 1.5;
}

/* Flip */
@keyframes rotating {
    from{transform: rotateY(0deg);} to {transform: rotateY(180deg);}
}

/* For Header */
header{
    top: 0; left: 0; width: 100%;
    position: fixed;
    display: flex;
    z-index: 1001;
}

/* For big title */
.bigtitle{
    font-family: "Google Sans";
    top: 56px; left: 0; width: 100%; 
    position: fixed;
    background-color: var(--asu-red);
    padding-top: 20px;
    box-shadow: 0px 2px 0px var(--asu-red);
    height:  50px;
}
.thetitle{
    font-size: 20px;
    font-weight: 900;
    color: white;
    margin: 0px 0px 0px 25px;
}

.titlebutton{
    font-weight: 100;
    font-size: 20px;
    margin-right: 20px;
    float: right;
}
.titlebutton a{
    color: var(--asu-yellow);
    text-decoration: none;
    padding: 10px;
}
.titlebutton a:hover{
        color: white;
}

/* For menu */
.menu-image{
    height: 36px;
}
.menu-image img{
    margin: 0px 40px 0 15px;
    height: 36px;
}
.menu{
    height: 56px;
    display: flex;
    position: absolute;
    width: 100%;
    padding-left: 10px;
    align-items: center;
    white-space: nowrap;
    background-color: var(--white);
}
.menu-item{
    display: flex;
    /*padding-top: 5px;*/
    /*padding-right: 30px;*/
    align-items: center;
    margin-right: 30px;
    height: 100%;
}
.menu-item.current a{
    position: relative;
    /*color: var(--asu-red);*/
}
.menu-item.current span{
    position: relative;
    font-weight: bold;
    color: var(--asu-red);
}
.menu-item.current span::after{
    content : "";
    border-top: 4px solid var(--asu-red);
    border-radius: 4px;
    top: -1.0em;
    left: 0em;
    position: absolute;
    width: 100%;
}
.menu-item a{
    color: black;
    text-decoration: none;
    margin-left: 0.5em;
}
.menu-item a:hover{
    color: var(--asu-red);
    border-bottom: 2px gray dotted;
}


/* for dropdown menu */
.dropdown{
    position: relative;
    align-items: center;
}
.dropdown i{
    margin-left: 5px;
}
.dropdown:hover i{
    transform: rotate( -180deg );            
    transition: transform 150ms ease;
}

.dropdown-content{
    position: absolute;
    min-width: 200px;
    background-color: var(--white);
    z-index: -1;
    border: 2px solid var(--asu-red);
    border-radius: 0 0 20px 20px;
    box-shadow: 0px 2px 10px 0px;
    left: -200px;
    top: 95%;
    padding-top: 10px;
    overflow: auto;
    transform: translate3d(0,-150%,0);
    transition: transform 0.5s;
}

.dropdown-content a{
    padding: 20px 16px;
    text-decoration: none;
    display: block;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
}
.dropdown-content a:hover{color: var(--asu-red); border-bottom: none;}
.dropdown:hover .dropdown-content {
    /*display: block;*/
    transform: translate3d(0,0%,0);
    transition: transform 0.5s;
}


/* For the main content */
.row{
  left: 0; width: 100%;
  /*position: fixed;*/
  display: block;
}

.container{
    display: flex;
    margin-top: 150px;
}

.row .container a{
    text-decoration: none;
    color: var(--asu-red);
}

.row .container a:hover{
    border-bottom: 2px gray dotted;
}

.column{
  flex: 1;
  padding: 0px 20px;
}


/* Big picture in main content */
.column .bigImageBack{
    height: 44.35rem;
    top: 130px;
    left: 0;
    width: 100%;
    position: absolute;
    content: "";
    z-index: -1;
    background-image: linear-gradient(180deg,rgba(25,25,25,0) 0,rgba(25,25,25,.78) 100%);
}
.column img[class=bigimage] {
    z-index: -1;
    top: 100px;
    left: 0;
    height:60%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    overflow: clip;
    z-index: -2;
}

.column .bigImageDes{
    margin-left:70px;
    margin-top:120px; 
}

.bigImageDes p{
    font-family: Arial, Helvetica, "Nimbus Sans L";
    color:white;
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 5px;
    /*max-width: 700px;*/
    font-weight: 700;
}

.column .two-column{
    display: grid;
    grid-template-columns: 1000px 400px;
    grid-column-gap: 40px;
}

.column .two-column a:hover{
    border-bottom: none;
}

/* For button-like <a> tag */
a[class=a-button]{
    background-color: var(--asu-red);
    color: white;
    font-weight: 700;
    border-radius: 20px;
    padding: 20px;
}

a[class=a-button]:hover{
    border-bottom: none;
}

/* For tables */
table[class=agenda]{
    border-spacing: 2px;
    border-color: gray;
    table-layout: fixed;
    width: 1000px;
    border-collapse: collapse;
}

table[class=agenda] thead {
    border: 1px solid;
    border-bottom: 3px solid;
}

table[class=agenda] tbody {
    border: 1px solid;
}

table[class=agenda] tr {
    text-align: left;
}

table[class=agenda] tr th{
    font-weight: bold;
    padding: 1rem;
    border: 1px solid;
}

table[class=agenda] tr td{
    padding: 1rem;
    border: 1px solid;
}

table[class=agenda] thead tr:first-child th{
    background-color: var(--gray);
}