#content { display: grid; grid-template-rows: repeat(20, auto); grid-template-columns: repeat(20, 1fr); z-index: 2; border-top-left-radius: 50px; overflow: scroll; } #content #feed { grid-row: 1 / span 20; grid-column: 1 / span 16; margin: 3%; margin-top: 0; height: 100%; overflow: scroll; } #content #feed #feed-welcome { display: grid; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(2, 1fr); margin-bottom: 2%; margin-left: 5%; } #content #feed #feed-welcome #feed-welcome-left #welcome-title { font-size: 3rem; } #content #feed #feed-welcome #feed-welcome-left #welcome-wallet a { color: darkblue; text-decoration: underline; cursor: pointer; } #content #feed #feed-welcome #feed-welcome-right { grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(3, 1fr); grid-column: 2; width: 70%; height: 80%; margin: 5%; margin-left: 15%; } #content #feed #feed-welcome #feed-welcome-right button { border: 1px lightgrey solid; border-radius: 0; background-color: white; } #content #feed #feed-welcome #feed-welcome-right button:hover { transform: none; box-shadow: none; border-radius: 0; color: black; background-color: whitesmoke; } #content #feed #feed-welcome #feed-welcome-right button:nth-of-type(1) { border-top-right-radius: 25px; border-top-left-radius: 25px; } #content #feed #feed-welcome #feed-welcome-right button:nth-of-type(3) { border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; } #content #feed .fa-youtube {color: red;} #content #feed .fa-twitter {color: #1DA1F2;} #content #feed .fa-discord {color: #7289da;} #content #feed #feed-todo { border-radius: 25px; border: 1px lightgrey solid; width: 97%; height: auto; margin-left: 2%; margin-bottom: 5%; overflow-x: scroll; } #content #feed #feed-todo h2:first-child { margin: 0; padding: 0; padding-top: 1.5%; padding-left: 4%; font-weight: normal; } #content #feed #feed-todo div { display: inline-grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(1, 1fr); border-radius: 15px; width: 30%; height: auto; margin: 1.3%; border: 1px lightgrey solid; } #content #feed #feed-todo div h1 { grid-row: 1; grid-column: 1; padding-left: 6%; padding-top: 2%; margin: 0 !important; } #content #feed #feed-todo div h2 { grid-row: 2; grid-column: 1; padding-left: 6%; margin: 0 !important; vertical-align: middle; } #content #feed #feed-todo div button { grid-row: 3; grid-column: 1; min-height: 30px; width: calc(100% - 10px) !important; margin: 5px; background-color: white; color: black; border: none; } #content #feed #feed-todo div.feed-todo-completed button { background-color: transparent; padding-left: 12% !important; text-align: left; } #content #feed #feed-todo div button:hover {transform: none;box-shadow: none;} #content #feed #feed-todo div:nth-of-type(1) {background-color: #bee0fe;;} #content #feed #feed-todo div:nth-of-type(2) {background-color: #59f7ef;} #content #feed #feed-todo div:nth-of-type(3) {background-color: #c59eff;} /***** Challenges *****/ #content #feed #feed-challenges { border-radius: 25px; border: 1px lightgrey solid; width: 97%; height: auto; margin-left: 2%; margin-bottom: 5%; overflow-x: scroll; } #content #feed #feed-challenges h2:first-child { margin: 0; padding: 0; padding-top: 1.5%; padding-left: 4%; font-weight: normal; } #content #feed #feed-challenges div { display: inline-grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(1, 1fr); border-radius: 15px; width: 30%; height: auto; margin: 1.3%; border: 1px lightgrey solid; } #content #feed #feed-challenges div h1 { grid-row: 1; grid-column: 1; padding-left: 6%; padding-top: 2%; margin: 0 !important; } #content #feed #feed-challenges div h2 { grid-row: 2; grid-column: 1; padding-left: 6%; margin: 0 !important; vertical-align: middle; } #content #feed #feed-challenges div p { grid-column: 1; grid-row: 3; padding-left: 6%; padding-right: 4%; } #content #feed #feed-challenges div button { grid-row: 4; grid-column: 1; min-height: 30px; width: 100% !important; background-color: #FFCCCB; color: black; border: 1px lightgrey solid; } #content #feed #feed-challenges div button:hover { transform: none; box-shadow: none; background-color: #FFCCCB; } #content #feed #feed-youtube { border-radius: 25px; border: 1px lightgrey solid; width: 90%; height: auto; margin-left: 2%; padding-left: 2.5% !important; padding-right: 2.5% !important; overflow-x: scroll; margin-bottom: 2.5%; } #content #feed #feed-iframe { border-radius: 25px; border: 1px lightgrey solid; width: 99%; height: auto; margin-top: 2.5%; overflow-x: scroll; } #content #feed #feed-iframe #feed-iframe-iframe { width: 100%; height: 100%; } #content #prices { grid-row: 1 / span 5; grid-column: 17 / span 20; margin: 5%; margin-left: 0; padding: 3%; border: 1px lightgrey solid; border-radius: 25px; } #content #prices #prices-name { padding: 2%; padding-left: 8%; } #content #prices ul {list-style-type: none;} #content #prices ul li { margin-bottom: 1%; font-size: 1.2rem; } #content #notifications { all: unset; grid-row: 6 / span 20; grid-column: 17 / span 20; margin: 5%; margin-left: 0; padding: 3%; border: 1px lightgrey solid; border-radius: 25px; } #content #notifications #notifications-title { padding: 2%; padding-left: 8%; } #content #notifications div { width: 94%; height: auto; border-top: 0.5px lightgrey solid; border-bottom: 0.5px lightgrey solid; padding: 3% !important; padding-top: 1.4%; padding-bottom: 1.4%; } #content #notifications div h2, #content #notifications div p { font-weight: normal; font-size: 1.2rem; padding-left: 4%; } #content #notifications div h2 { font-weight: bold; }