.container { display: none; } /* index */ #mainMenuView .modes { display: flex; gap: 2rem; } #mainMenuView .modes div { height: 10rem; width: 10rem; background: black; border: solid 1px white; border-radius: 15px; user-select: none; cursor: pointer; transition: all 0.3s; } #mainMenuView .modes div:hover { background: white; color: black; } /* PvP/index */ #pvpMenuView .modes { display: flex; gap: 2rem; } #pvpMenuView .modes div { height: 10rem; width: 10rem; background: black; border: solid 1px white; border-radius: 15px; user-select: none; cursor: pointer; transition: all 0.3s; } #pvpMenuView .modes div:hover { background: white; color: black; } /* PvP/create */ #pvpCreateView .modes { display: flex; gap: 2rem; } #pvpCreateView .modes div { height: 17rem; width: 15rem; background: black; border: solid 1px white; border-radius: 15px; user-select: none; padding: 1rem 3rem; display: flex; flex-direction: column; gap: 0.5rem; } #pvpCreateView input, #pvpCreateView button { background: black; color: white; border-radius: 15px; border: 1px solid white; font-size: 1.5rem; text-align: center; padding: 0.5rem 2rem; outline: none; transition: opacity 0.2s; } #pvpCreateView button { cursor: pointer; font-size: 1rem; transition: all 0.3s; } #pvpCreateView button:hover { background: white; color: black; } /* PvP/join */ #pvpJoinView .modes { display: flex; gap: 2rem; } #pvpJoinView .modes div { height: 7rem; width: 15rem; background: black; border: solid 1px white; border-radius: 15px; user-select: none; padding: 2rem 3rem; } #pvpJoinView form { display: flex; flex-direction: column; gap: 2rem; } #pvpJoinView form input { background: black; color: white; border-radius: 15px; border: 1px solid white; font-size: 1.5rem; text-align: center; padding: 0.5rem 2rem; outline: none; } #pvpJoinView form input[type=submit] { cursor: pointer; font-size: 1rem; transition: all 0.3s; } #pvpJoinView form input[type=submit]:hover { background: white; color: black; }